<template>
  <q-layout ref="layout" view="lHh Lpr fff" :left-class="{'bg-grey-2': true}">
    <q-toolbar slot="header" class="glossy">
      <q-btn flat @click="$refs.layout.toggleLeft()">
        <q-icon name="menu" />
      </q-btn>
      <q-toolbar-title>
        {{moduletitle}}
        <!-- <div slot="subtitle">Running on Quasar v{{$q.version}}</div> -->
      </q-toolbar-title>
    </q-toolbar>
    <div slot="left">
      <q-toolbar slot="header" class="glossy">
        <q-toolbar-title>
          彩票分析平台
        </q-toolbar-title>
      </q-toolbar>
      <q-list no-border link inset-delimiter>
        <q-collapsible icon="" label="号码录入">
          <q-side-link item to="/lst/hand">
            <q-item-side icon="" />
            <q-item-main label="手动">
            </q-item-main>
          </q-side-link>
          <q-side-link item to="/lst/auto">
            <q-item-side icon="" />
            <q-item-main label="自动" />
          </q-side-link>
        </q-collapsible>
        
        <q-collapsible icon="" label=" 查询分析">
          <q-side-link item to="/lst/select">
            <q-item-side icon="" />
            <q-item-main label="期数查询" />
          </q-side-link>
        </q-collapsible>
        
        <q-item @click="logout">
          <q-item-side icon="" />
          <q-item-main label="注销" />
        </q-item>
      </q-list>
    </div>
    <!-- <q-transition enter="fadeIn" leave="fadeOut" mode="out-in" :duration="300" @leave="resetScroll">
                            <router-view />
                          </q-transition> -->
    <router-view />
    
    <!--
                                Replace following <div> with
                                <router-view /> component
                                if using subRoutes
                              -->
    <!-- <div id="editor"> -->
    <!-- default_open="preview" :subfield="false" :toolbarsFlag="false" -->
    <!-- <mavon-editor style="height: 100%" v-model="scontent" @save="savemd"></mavon-editor> -->
    <!-- </div> -->
    <!-- <div class="layout-padding logo-container non-selectable no-pointer-events">
                            <div class="logo" :style="position">
                              <img src="~assets/quasar-logo-full.svg">
                            </div>
                          </div> -->
  </q-layout>
</template>

<script>
  import {
    dom,
    event,
    openURL,
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QListHeader,
    QItem,
    QItemSide,
    QItemMain,
    QCollapsible,
    QTransition,
    QSideLink,
    Dialog
  } from 'quasar'
  import {
    mavonEditor
  } from 'mavon-editor'
  // 可以通过 mavonEditor.markdownIt 获取解析器markdown-it对象
  import 'mavon-editor/dist/css/index.css'
  const {
    viewport
  } = dom, {
    position
  } = event,
  moveForce = 30,
    rotateForce = 40,
    RAD_TO_DEG = 180 / Math.PI
  function getRotationFromAccel(accelX, accelY, accelZ) {
    /* Reference: http://stackoverflow.com/questions/3755059/3d-accelerometer-calculate-the-orientation#answer-30195572 */
    const sign = accelZ > 0 ? 1 : -1
    const miu = 0.001
    return {
      roll: Math.atan2(accelY, sign * Math.sqrt(Math.pow(accelZ, 2) + miu * Math.pow(accelX, 2))) * RAD_TO_DEG,
      pitch: -Math.atan2(accelX, Math.sqrt(Math.pow(accelY, 2) + Math.pow(accelZ, 2))) * RAD_TO_DEG
    }
  }
  export default {
    name: 'chineseindex',
    components: {
      QLayout,
      QToolbar,
      QToolbarTitle,
      QBtn,
      QIcon,
      QList,
      QListHeader,
      QItem,
      QItemSide,
      QItemMain,
      QCollapsible,
      QTransition,
      mavonEditor,
      QSideLink
    },
    data() {
      return {
        orienting: window.DeviceOrientationEvent && !this.$q.platform.is.desktop,
        rotating: window.DeviceMotionEvent && !this.$q.platform.is.desktop,
        moveX: 0,
        moveY: 0,
        rotateY: 0,
        rotateX: 0,
        moduletitle: '',
        scontent: '# 习作示例标题\n 另一种标题写法\n =========\n 作者 *黄睿琪* 发表时间 *2017-12-01* 来自 *厦门双思2016 2班 黄睿琪*  指导老师 *叶老师*  \n > 子在川上曰 逝者如斯乎\n  勾股定理 $c^2=a^2+b^2$\n ## 二级标题'
      }
    },
    computed: {
      position() {
        const transform = `rotateX(${this.rotateX}deg) rotateY(${this.rotateY}deg)`
        return {
          top: this.moveY + 'px',
          left: this.moveX + 'px',
          '-webkit-transform': transform,
          '-ms-transform': transform,
          transform
        }
      }
    },
    methods: {
      launch(url) {
        openURL(url)
      },
      move(evt) {
        const {
          width,
          height
        } = viewport(), {
            top,
            left
          } = position(evt),
          halfH = height / 2,
          halfW = width / 2
        this.moveX = (left - halfW) / halfW * -moveForce
        this.moveY = (top - halfH) / halfH * -moveForce
        this.rotateY = (left / width * rotateForce * 2) - rotateForce
        this.rotateX = -((top / height * rotateForce * 2) - rotateForce)
      },
      rotate(evt) {
        if (evt.rotationRate &&
          evt.rotationRate.beta !== null &&
          evt.rotationRate.gamma !== null) {
          this.rotateX = evt.rotationRate.beta * 0.7
          this.rotateY = evt.rotationRate.gamma * -0.7
        } else {
          /* evt.acceleration may be null in some cases, so we'll fall back
             to evt.accelerationIncludingGravity */
          const
            accelX = evt.acceleration.x || evt.accelerationIncludingGravity.x,
            accelY = evt.acceleration.y || evt.accelerationIncludingGravity.y,
            accelZ = evt.acceleration.z || evt.accelerationIncludingGravity.z - 9.81,
            rotation = getRotationFromAccel(accelX, accelY, accelZ)
          this.rotateX = rotation.roll * 0.7
          this.rotateY = rotation.pitch * -0.7
        }
      },
      orient(evt) {
        if (evt.beta === null || evt.gamma === null) {
          window.removeEventListener('deviceorientation', this.orient, false)
          this.orienting = false
          window.addEventListener('devicemotion', this.rotate, false)
        } else {
          this.rotateX = evt.beta * 0.7
          this.rotateY = evt.gamma * -0.7
        }
      },
      savemd() {
        console.log('保存')
      },
      logout() {
        let self = this
        Dialog.create({
          title: '注销确认',
          message: '您确定要注销当前的登录吗？',
          buttons: [{
              label: '取消',
              handler() {
                console.log('取消注销...')
              }
            },
            {
              label: '确定',
              handler() {
                //todo 后台处理
                self.$router.push('/login')
              }
            }
          ]
        })
      }
    },
    mounted() {
      console.log(this.$store.state.st)
      if(!this.$store.state.st){
        this.$router.push('/login')
      }
      this.$nextTick(() => {
        if (this.orienting) {
          window.addEventListener('deviceorientation', this.orient, false)
        } else if (this.rotating) {
          window.addEventListener('devicemove', this.rotate, false)
        } else {
          document.addEventListener('mousemove', this.move)
        }
      })
      if (this.moduletitle == '') {
        this.moduletitle = this.$store.state.moduletitle[this.$route.path]
      }

    },
    watch: {
      '$route' (to, from) {
        if (to) {
          this.moduletitle = this.$store.state.moduletitle[to.path]
        }
      }
    },
    beforeDestroy() {
      if (this.orienting) {
        window.removeEventListener('deviceorientation', this.orient, false)
      } else if (this.rotating) {
        window.removeEventListener('devicemove', this.rotate, false)
      } else {
        document.removeEventListener('mousemove', this.move)
      }
    }
  }
</script>

<style lang="stylus">

.subtitle 
    font-size 12pt
  
.logo-container
  width 255px
  height 242px
  perspective 800px
  position absolute
  top 50%
  left 50%
  transform translateX(-50%) translateY(-50%)
.logo
  position absolute
  transform-style preserve-3d

 
</style>